<template>
    <div id="enterKuData" ref="enterkudata">

    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
const enterkudata = ref(null)
const option = {
    legend: { icon: 'circle' },
    title:{text:'出入库情况'},
    dataset: {
        dimensions: ['product', '出库', '入库'],
        source: [
            { product: '1月', 出库: 320, 入库: 220 },
            { product: '2月', 出库: 340, 入库: 180 },
            { product: '3月', 出库: 400, 入库: 190 },
            { product: '4月', 出库: 345, 入库: 245 },
            { product: '5月', 出库: 380, 入库: 280 },
            { product: '6月', 出库: 320, 入库: 230 },
            { product: '7月', 出库: 320, 入库: 220 },
            { product: '8月', 出库: 340, 入库: 180 },
            { product: '9月', 出库: 400, 入库: 190 },
            { product: '10月', 出库: 345, 入库: 245 },
            { product: '11月', 出库: 380, 入库: 280 },
            { product: '12月', 出库: 320, 入库: 230 },
        ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [{
        type: 'bar', showBackground: true,
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#4199f7' },
                { offset: 0.5, color: '#5b68eb' },
                { offset: 1, color: '#6b4ce7' }
            ])
        },
        emphasis: {
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#6b4ce7' },
                    { offset: 0.7, color: '#2378f7' },
                    { offset: 1, color: '#83bff6' }
                ])
            }
        },
    }, {
        type: 'bar', showBackground: true,
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#14c0a9' },
                { offset: 0.5, color: '#5ccf9c' },
                { offset: 1, color: '#9bdb95' }
            ])
        },
        emphasis: {
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#9bdb95' },
                    { offset: 0.7, color: '#2378f7' },
                    { offset: 1, color: '#83bff6' }
                ])
            }
        },
    }]
};

onMounted(() => {
    var myChart = echarts.init(enterkudata.value);
    option && myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
})
</script>

<style scoped lang="scss">
#enterKuData {
    width: 100%;
    height: 100%;
    padding: 5px;
}
</style>
